<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

  <p>{{fullName1}}</p>
  <p>{{fullName1}}</p>
</div>

<script type="text/javascript" src="../../js/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#demo',
    data: {
      firstName: 'A',
      lastName: 'B',
      // fullName1: 'A B'
      fullName2: 'A B'
    },
    computed: {
      fullName1(){  //计算属性的一个方法，方法的返回值作为属性值
        // return this.firstName + ' ' + this.lastName
        return this.firstName  + this.lastName
      }
    },
    watch: { //配置监视
      firstName: function (value){ //firstName发生了变化
        console.log(this) //就是vm对象
        this.fullName2 = value + ' ' + this.lastName;
      },
      fullName3: {
        //1.你定义的，2.你没有调，3.但最终执行了
        //2.什么时候调用，用来干嘛的

        get() {
          return this.firstName + ' ' + this.lastName;
        },
        //回调函数() 监视当前属性值的变化 读取当前属性值，计算并返回当前属性的值
        set(value) { //value就是fullName3的罪行属性的值
          const names = value.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        }
      }
    }
  })

  vm.$watch('lastName',function (value){
    //更新fullName2
    this.fullName2 = this.firstName + ' ' + value
  })
</script>
</body>
</html>